<template>
  <div class="details-page">
    <div class="details-page-top">
      <top-header :title="header_title"></top-header>
      <addressTitle />
      <div class="search-around-input display">
        <search-input class="search-component"
                      :placeholder_value="search_placeholder_value"
                      :search_type="$route.query.module_name"
                      @input="
						(e) => {
							search_word = e.value;
						}
					"></search-input>
        <div class="search-button"
             @click="goSearch">搜索</div>
      </div>
      <van-swipe class="my-swipe"
                 indicator-color="white"
                 v-if="$route.query.module_name != '0'">
        <van-swipe-item v-for="item in banner_list"
                        :key="item.id">
          <van-image class="my-swipe-img"
                     @click="getSwiperImg(item)"
                     :src="item.img" />
        </van-swipe-item>
      </van-swipe>
      <div class="display font-size-18 font-weight-500"
           style="padding: 0.483092rem 0 0.386473rem 0">猜你喜欢</div>
    </div>
    <TourGuide v-if="$route.query.module_name === '0'" />
    <card-list class="details-page-cardlist"
               v-else
               :button_text="button_text"
               :module_name="$route.query.module_name"
               :card_list="card_list"
               :page_config="card_loading_config"
               @onLoad="onLoad"
               @onRefresh="onRefresh" />
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import SearchInput from '@/components/SearchInput';
import addressTitle from '@/components/addressTitle';
import CardList from '@/components/CardList';
import TourGuide from '@/components/TourGuide';
import cookie from '@/utils/cookie';
export default {
	name: 'index',
	components: {
		TopHeader,
		SearchInput,
		addressTitle,
		CardList,
		TourGuide,
	},
	data() {
		return {
			button_text: '', //card操作按钮text
			banner_list: [], //banner列表
			search_placeholder_value: '', //search框的placeholder
			search_word: '', //搜索参数
			header_title: '', //header的title
			nav_list: [], //nav的list
			card_list: [], //card总列表
			card_list_new: [], //接口新获取的列表
			list_total: 0, //列表总数
			default_page: 1, //列表默认页
			card_loading_config: {
				loading: false, //列表加载标识
				finished: false, //列表停止加载标识
				refreshing: false, //列表下拉刷新标识
			},
		};
	},
	mounted() {
		this.nav_list = JSON.parse(localStorage.getItem('NavList'));
		this.getCardList(this.$route.query.module_name);
	},
	methods: {
		getCardList(name) {
			//获取列表
			switch (name.toString()) {
				case '0':
					this.header_title = this.nav_list[0].name;
					this.search_placeholder_value = '景区';
					this.button_text = '';
					break;
				case '1':
					this.header_title = this.nav_list[1].name;
					this.search_placeholder_value = '景区/门票';
					this.button_text = '';
					this.getCarouselList(2);
					break;
				case '2':
					this.header_title = this.nav_list[2].name;
					this.search_placeholder_value = '酒店/民宿';
					this.button_text = '预定';
					this.getCarouselList(3);
					break;
				case '3':
					this.header_title = this.nav_list[3].name;
					this.search_placeholder_value = '请输入餐馆名称';
					this.button_text = '预定';
					this.getCarouselList(4);
					break;
				case '4':
					this.header_title = this.nav_list[4].name;
					this.search_placeholder_value = '请输入特产名称';
					this.button_text = '购买';
					this.getCarouselList(5);
					break;
				default:
					this.button_text = '';
			}
		},
		getCarouselList(position) {
			_api
				.api_userPortal_sysBanner_getListByCon({
					town_id: cookie.get('town_id'),
					position,
				})
				.then((res) => {
					console.log(res.data.data);
					this.banner_list = res.data.data;
				})
				.catch((error) => {
					console.log(error);
				});
		},
		changePage(val) {
			this.getCommoditiesList(val);
		},
		getCommoditiesList(val) {
			//获取门票列表
			_api
				.api_userPortal_tourProduct_getListByCon({
					type: this.$route.query.module_name,
					status: 1,
					page: val,
					search_word: this.search_word,
					level: 'Y,img,sku_min_price',
					town_id: cookie.get('town_id'),
				})
				.then((res) => {
					this.card_list_new = res.data.data;
					this.list_total = res.data.total;
					this.concatList();
				})
				.catch((error) => {
					console.log(error);
				});
		},
		onLoad(val) {
			//加载列表
			if (this.card_loading_config.refreshing) {
				this.card_list = [];
				this.card_loading_config.refreshing = false;
			}
			this.changePage(this.default_page++);
		},
		concatList() {
			//合并列表
			this.card_list = this.card_list.concat(this.card_list_new);
			this.card_loading_config.loading = false;
			if (this.card_list.length >= this.list_total) {
				this.card_loading_config.finished = true;
			}
		},
		onRefresh() {
			// 清空列表数据
			this.card_list = [];
			this.card_loading_config.finished = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.card_loading_config.loading = true;
			this.default_page = 1;
			this.onLoad(this.default_page);
		},
		goSearch() {
			//去往搜索页
			this.$router.push({
				path: '/searchPage',
				query: { module_name: this.$route.query.module_name, search_word: this.search_word },
			});
		},
		getSwiperImg(info) {
			//轮播点击
			console.log(JSON.stringify(info));
			if (Number(info.target_type) === 2) {
				location.href = `http://${info.target}`;
			}
			if (Number(info.target_type) === 1) {
				this.handleGoShopgetById(info.target);
			}
		},
        		// 商品详情页
		handleGoShopgetById(id) {
			this.$router.push({ path: '/check', query: { tour_product_id: id } });
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
.card-button-master {
	width: 1.980676rem;
	align-items: center;
	border-radius: 0.386473rem;
	font-size: 0.338164rem;
	height: 0.676329rem;
	border: #f14820 0.024155rem solid;
	background-color: #f14820;
	color: #ffffff;
	display: flex;
	justify-content: center;
}
.details-page {
	.my-swipe {
		width: 9.323671rem;
		height: 4.154589rem;
		margin-top: 0.483092rem;

		::v-deep .van-swipe__track {
			width: 100% !important;
			.van-swipe-item {
				width: 100% !important;
				height: 100%;
			}
		}
	}
	.my-swipe .van-swipe-item {
		color: #fff;
		height: 4.10628rem;
		font-size: 0.483092rem;
		line-height: 3.623188rem;
		text-align: center;

		.my-swipe-img {
			width: 100%;
			height: 100%;
			::v-deep .van-image__img {
				border-radius: 0.241546rem;
				object-fit: cover;
			}
		}
	}
}
</style>
